<template>
  <div class="evaluate">
    <div>
      <div class="evaluate_rate">
        <div class="rateLeft">
          <h3>{{ form.score }}</h3>
          <p class="mb10">综合评分</p>
          <p style="color: #a7a7a7">高于周边商家96%</p>
        </div>
        <div class="rateRight">
          <p class="mb6">
            服务态度<van-rate
              v-model="value"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              allow-half
              size="16px"
              style="margin-right: 6px"
            />{{ value }}
          </p>
          <p class="mb6">
            菜品质量<van-rate
              v-model="value1"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              allow-half
              style="margin-right: 6px"
              size="16px"
            />{{ value1 }}
          </p>
          <p>
            <span class="mr6">送达时间</span
            ><span style="color: #a7a7a7">{{ form.deliveryTime }}分钟</span>
          </p>
        </div>
      </div>
      <div class="goodsevaluate">
        <van-tabs
          type="card"
          title-active-color="#333"
          line-height="50px"
          title-inactive-color="#FFC300"
        >
          <van-tab :title="'全部  ' + formList.length">
            <div
              style="
                display: flex;
                padding: 10px;
                border-bottom: 1px solid #ccc;
              "
              v-for="(item, index) in formList"
              :key="index"
            >
              <img :src="item.avatar" alt="" class="userImg" />
              <div style="flex: 1">
                <p
                  style="display: flex; justify-content: space-between"
                  class="mb6"
                >
                  <span>{{ item.username }}</span
                  ><span>{{ item.rateTime }}</span>
                </p>
                <p class="mb6">
                  <van-rate v-model="item.score" color="#ffd21e" /><span
                    class="ml5"
                    >{{ item.deliveryTime ?item.deliveryTime+'分钟送达':''}}</span
                  >
                </p>
                <p class="mb6">{{ item.text }}</p>
                <div style="display: flex" class="mb6">
                  <!-- 点赞 -->
                  <van-icon
                    name="good-job"
                    color="#ffd21e"
                    size="20"
                    class="mr15"
                    v-show='item.flag>0'
                  />
                  <div style="display: flex; flex-wrap: wrap">
                    <span
                      class="orderlist"
                      v-for="(child, index) in item.recommend"
                      :key="index">{{ child }}</span >
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab :title="'满意' + goodList.length">
            <div
              style="
                display: flex;
                padding: 10px;
                border-bottom: 1px solid #ccc;
              "
              v-for="(item, index) in goodList"
              :key="index"
            >
              <img :src="item.avatar" alt="" class="userImg" />
              <div style="flex: 1">
                <p
                  style="display: flex; justify-content: space-between"
                  class="mb6"
                >
                  <span>{{ item.username }}</span
                  ><span>{{ item.rateTime }}</span>
                </p>
                <p class="mb6">
                  <van-rate v-model="item.score" color="#ffd21e" /><span
                    class="ml5"
                    >{{ item.deliveryTime ?item.deliveryTime+'分钟送达':''}}</span
                  >
                </p>
                <p class="mb6">{{ item.text }}</p>
                <div style="display: flex" class="mb6">
                  <van-icon
                    name="good-job"
                    color="#ffd21e"
                    size="20"
                    class="mr15"
                   v-show='item.flag>0'
                  />
                  <div style="display: flex; flex-wrap: wrap">
                    <span
                      class="orderlist"
                      v-for="(child, index) in item.recommend"
                      :key="index"
                      >{{ child }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab :title="'不满意' + notgoodList.length">
            <div
              style="
                display: flex;
                padding: 10px;
                border-bottom: 1px solid #ccc;
              "
              v-for="(item, index) in notgoodList"
              :key="index"
            >
              <img :src="item.avatar" alt="" class="userImg" />
              <div style="flex: 1">
                <p
                  style="display: flex; justify-content: space-between"
                  class="mb6"
                >
                  <span>{{ item.username }}</span
                  ><span>{{ item.rateTime }}</span>
                </p>
                <p class="mb6">
                  <van-rate v-model="item.score" color="#ffd21e" /><span
                    class="ml5"
                    >{{ item.deliveryTime ?item.deliveryTime+'分钟送达':''}}</span
                  >
                </p>
                <p class="mb6">{{ item.text }}</p>
                <div style="display: flex" class="mb6">
                  <div style="display: flex; flex-wrap: wrap">
                    <span
                      class="orderlist"
                      v-for="(child, index) in item.recommend"
                      :key="index"
                      >{{ child }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getshopRatings, getshopSeller } from "@/apis/merchandise";
import { getYYYYMMDDhhmmss } from "@/utils/utils";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      formList: [{}], //商品评价列表
      form: "", //商店信息
      value: 4.5, //服务态度
      value1: 4.5, //菜品质量
      goodList: [], //满意数组
      notgoodList: [], //不满意数组
      flag: "",
    };
  },
  async created() {
    let res = await getshopRatings();
    this.formList = res.data.data;
    for (let obj of res.data.data) {
      obj.rateTime = getYYYYMMDDhhmmss(obj.rateTime);
      obj.flag=obj.recommend.length
      if (obj.rateType == 0) {
        this.goodList.push(obj);
      } else {
        this.notgoodList.push(obj);
      }
    }
    // console.log(this.goodList);
    // console.log(this.formList);
    let res1 = await getshopSeller();
    this.form = res1.data.data;
    this.$nextTick(() => {
      new BScroll(".evaluate", { click: true });
    });
  },

};
</script>

<style lang="less">
.evaluate {
  background: #f4f5f7;
  height: 100%;
  overflow: scroll;
}
.evaluate_rate {
  background: #fff;
  display: flex;
  height: 130px;
  border-top: 1px solid #ccc;
  justify-content: center;
  align-items: center;
}
.rateLeft {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  justify-content: center;
  border-right: 1px solid #ccc;
  padding-right: 10px;
  h3 {
    color: #ffc300;
    font-size: 30px;
    margin-bottom: 5px;
  }
}
.goodsevaluate {
  margin-top: 15px;
  background-color: #fff;
  padding-top: 20px;
}
.orderlist {
  padding: 4px;
  border: 1px solid #ccc;
  margin-right: 5px;
  color: #ccc;
  margin-bottom: 5px;
  font-size: 12px;
  border-radius: 10%;
}
.userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.van-tabs__content {
  padding: 0 10px;
}
.van-tabs__nav--card {
  border: 1px solid #ffc300;
}
.van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #ffc300;
}
.van-tabs__nav--card .van-tab {
  border-right: 1px solid #ffc300;
}
</style>